<template >
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column v-for="(v, key) in dataKey" :prop="key" :label="v"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)" v-if="showButton.edit">编辑</el-button>
                    <el-button type="text" @click="openDel(scope.row)" v-if="showButton.del">删除</el-button>
                    <el-button
                        type="text"
                        @click="openNone(scope.row)"
                        v-if="showButton.none"
                        v-show="!scope.row.none"
                    >启用</el-button>
                    <el-button
                        type="text"
                        @click="openNone(scope.row)"
                        v-if="showButton.none"
                        v-show="scope.row.none"
                    >停用</el-button>
                    <el-button type="text" @click="open" v-if="showButton.have">收款</el-button>
                    <el-button type="text" @click="open" v-if="showButton.quit">退款</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表单：编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in editShow"
                    v-if="v.type == 'input'"
                >
                    <el-input v-model="form[v.value]" suffix-icon="el-icon-star-on"></el-input>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in editShow"
                    v-if="v.type == 'switch'"
                >
                    <el-switch
                        v-model="form[v.value]"
                        active-color="#409EFF"
                        inactive-color="#DBDEE0"
                    ></el-switch>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    label-width="100px"
                    v-for="v in editShow"
                    v-if="v.type == 'select'"
                >
                    <el-select v-model="form[v.value]" placeholder="请选择">
                        <el-option v-for="w in v.options" :label="w" :value="w"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    :label="v.name"
                    v-if="v.type == 'textarea'"
                    v-for="v in editShow"
                    label-width="100px"
                >
                    <el-input type="textarea" v-model="form[v.value]"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendEdit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Event from "@/utils/Event";

export default {
    data() {
        return {
            tableData: [],
            dataKey: {},
            showButton: { del: false, edit: false, none: false, have: false, quit: false, state: true },
            dialogFormVisible: false,
            form: {},
            editShow: [],
            noticeData: []
        }
    },
    methods: {
        receive() {
            Event.$on('data', (v) => {
                if (v) {
                    this.dataKey = v;
                }
            })
            Event.$on('button', (v) => {
                if (v) {
                    this.showButton = v;
                }
            })
            Event.$on('tableData', v => {
                if (v) { this.tableData = v.tableData; }
            })
            Event.$on('editShow', v => {
                if (v) {
                    this.editShow = v;
                    for (let i = 0; i < this.editShow.length; i++) {
                        this.form[this.editShow[i].value] = '';
                    }
                    this.form = { ...this.form }
                }
            })
            Event.$on('table', v => {
                this.noticeData = v;
            })
        },
        sendEdit() {
            this.dialogFormVisible = false;
            Event.$emit('edit', this.form);
        },
        openDel() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        openNone(v) {
            this.$confirm('此操作将修改该账号的状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                v.none = !v.none;
                Event.$emit('none', v)
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消停用'
                });
            });
        },
        //编辑
        handleEdit(v) {
            this.dialogFormVisible = true
            for (let i in v) {
                for (let j in this.form) {
                    if (i == j) {
                        this.form[j] = v[i]
                    }
                }
            }
            this.editShow.some(i => {
                if (i.type == 'switch') {
                    v[i.value] == i.true ? this.form[i.value] = true : this.form[i.value] = false;
                }
            })
        },
        see() {
            Event.$on('seeForm', v => {
                let arr = [...this.noticeData]
                for (let j in v) {
                    if (v[j]) {
                        arr = arr.filter(i => {
                            return i[j].indexOf(v[j]) != -1
                        })
                        Event.$emit('noticeData', arr)
                    }
                }
            })
        },
        reset() {
            Event.$on('reset', v => {
                if (v) {
                    Event.$emit('noticeData', this.noticeData)
                }
            });
        },
    },
    mounted() {
        this.receive();
        this.see();
        this.reset();
    },
}
</script>
<style scoped>
.el-input,
.el-select {
    width: auto;
    display: inline-block;
}
</style>